<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>营销管理</el-breadcrumb-item>
            <el-breadcrumb-item>满赠</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">满赠</h3>
          <el-form :inline="true"  class="demo-form-inline" style="text-align: left" ref="searchbox">
            <el-form-item label="活动名称">
              <el-input v-model="name" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="状态">
              <el-select v-model="status" placeholder="请选择状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="未开始" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已结束" value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="会员等级">
              <el-input v-model="svipId" :disabled="true"></el-input>
            </el-form-item>




            <el-row :gutter="20">
              <el-col :span="20">
                <el-row style="margin-bottom: 20px;text-align: left" >
                  <span style="padding: 10px">付费会员等级</span>
                  <el-button plain @click="doSearch(0)">不限</el-button>
                  <el-button plain v-for="item in svipList" :key="item.id" @click="doSearch(item.id)">{{ item.name }}</el-button>
                  <el-button style="margin-left: 50px" type="primary" @click="search">查询</el-button>
                  <el-button  @click="resetBox">重置</el-button>
                </el-row>

              </el-col>
            </el-row>



          </el-form>
        </el-card>


      <el-card style="margin-top: 30px">

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">满赠活动
              <div style="float: right;margin-right: 30px;">
                <el-button type="primary" size="mini" @click="showAdd">新建</el-button>
              </div>
            </h3>
            <el-table :data="PresentVoList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="活动名称" prop="name"></el-table-column>
              <el-table-column label="开始时间" prop="startTime"></el-table-column>
              <el-table-column label="结束时间" prop="endTime"></el-table-column>
              <el-table-column label="活动状态" prop="status">
                <template slot-scope="scope">
                  <b style="color:#0000ff" v-show="scope.row.status==1">{{caseStatusArr[1]}}</b>
                  <b style="color:#3cb371" v-show="scope.row.status==2">{{caseStatusArr[2]}}</b>
                  <b style="color:#ff0000" v-show="scope.row.status==3">{{caseStatusArr[3]}}</b>
                </template>
              </el-table-column>
              <el-table-column label="满赠阈值" prop="threshold"></el-table-column>

              <el-table-column label="赠送商品" prop="list1">
                <template slot-scope="scope">
                  <b v-for="item in scope.row.list1" v-html="item.commodityname+'<p>'"><hr/>
                  </b>
                </template>
              </el-table-column>

              <el-table-column label="适用会员等级" prop="list">
                <template slot-scope="scope">
                  <b v-for="item in scope.row.list" v-html="item.name+'<p>'"><hr/>
                  </b>
                </template>
              </el-table-column>


                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
<!--                        <el-button type="info" size="mini" @click="showData(scope.row.id)">数据</el-button>-->
                        <el-button type="warning" size="mini" @click="showChange(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" v-show="scope.row.status==2" @click="stopIt(scope.row.id)">停用</el-button>
                        <el-button type="success" size="mini" v-show="scope.row.status==1" @click="startIt(scope.row.id)">开始</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

      <!-- 新增模态框-->
      <el-dialog title="添加满赠" :visible.sync="addDialogVisible" width="50%" @close="cancelAdd">
        <el-form
            :model="addForm"
            :rules="addFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="活动名称:" prop="name" placeholder="请输入优惠券名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>

          <el-form-item label="适用日期" placeholder="请选择适用日期" >
            <div class="block">
              <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>

          </el-form-item>


          <el-form-item label="满赠门槛" prop="threshold" placeholder="请输入满赠门槛，若为空则无门槛" >
            <el-input v-model="addForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="适用付费会员等级">
            <el-select v-model="svipIds" multiple placeholder="请选择适用的等级">

              <el-option :label="item.name" :value="item.id" v-for="item in svipList" :key="item.id"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="满赠商品">
            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
              适用商品列表
              <el-button type="primary" style="float: right" size="mini" @click="showCommodity1()">选择赠送商品</el-button>
            </h3>


            <el-table :data="addList"  border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="商品封面">
                <template slot-scope="scope">
                  <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
                </template>

              </el-table-column>
              <el-table-column label="商品名称" prop="commodityname"></el-table-column>
              <el-table-column label="商品名称" prop="commodityprice"></el-table-column>

              <el-table-column label="商品赠送数量">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.num"></el-input>
                </template>
              </el-table-column>
            </el-table>

          </el-form-item>






        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </span>
      </el-dialog>
      <!--新增满赠--选择商品的模态框-->
      <el-dialog title="选择商品" :visible.sync="addDialogVisible1" width="50%" >
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
                <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="commodityList" @selection-change="idChance" border stripe ref="multipleTable">
            <el-table-column type="selection" width="60" >
            </el-table-column>
            <el-table-column label="商品封面">
              <template slot-scope="scope">
                <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
            <el-table-column label="销售量" prop="salecounts"></el-table-column>
            <el-table-column label="商品状态" prop="commoditystatus">
              <template slot-scope="s">
                <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="salestarttime"></el-table-column>


          </el-table>
          <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageNum1"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doAdd0">确 定</el-button>
        <el-button type="primary" @click="addDialogVisible1 = false">取消</el-button>
      </el-dialog>


      <el-dialog title="修改满赠" :visible.sync="changeDialogVisible" width="50%" @close="cancelAdd">
        <el-form
            :model="changeForm"
            :rules="changeFormRules"
            ref="addUserFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="活动名称:" prop="name" placeholder="请输入优惠券名称">
            <el-input v-model="changeForm.name"></el-input>
          </el-form-item>

          <el-form-item label="适用日期" placeholder="请选择适用日期" >
            <div class="block">
              <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>

          </el-form-item>


          <el-form-item label="满赠门槛" prop="threshold" placeholder="请输入满赠门槛，若为空则无门槛" >
            <el-input v-model="changeForm.threshold"></el-input>
          </el-form-item>

          <el-form-item label="适用付费会员等级">
            <el-select v-model="changeSvipIds" multiple placeholder="请选择适用的等级">

              <el-option :label="item.name" :value="item.id" v-for="item in svipList" :key="item.id"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="满赠商品">
            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
              适用商品列表
              <el-button type="primary" style="float: right" size="mini" @click="showCommodity2()">选择赠送商品</el-button>
            </h3>


            <el-table :data="changeList"  border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="商品封面">
                <template slot-scope="scope">
                  <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
                </template>

              </el-table-column>
              <el-table-column label="商品名称" prop="commodityname"></el-table-column>
              <el-table-column label="商品名称" prop="commodityprice"></el-table-column>

              <el-table-column label="商品赠送数量">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.num"></el-input>
                </template>
              </el-table-column>
            </el-table>

          </el-form-item>






        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doChange">确 定</el-button>
        <el-button @click="cancelChange">取 消</el-button>
      </span>
      </el-dialog>


      <el-dialog title="选择商品" :visible.sync="changeDialogVisible1" width="50%" >
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
                <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 30px">

          <el-table :data="commodityList" @selection-change="idChance" border stripe ref="multipleTable1">
            <el-table-column type="selection" width="60" >
            </el-table-column>
            <el-table-column label="商品封面">
              <template slot-scope="scope">
                <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
            <el-table-column label="销售量" prop="salecounts"></el-table-column>
            <el-table-column label="商品状态" prop="commoditystatus">
              <template slot-scope="s">
                <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="salestarttime"></el-table-column>


          </el-table>
          <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageNum1"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
          ></el-pagination>

        </el-card>
        <el-button type="primary" @click="doChange0()">确 定</el-button>
        <el-button type="primary" @click="changeDialogVisible1 = false">取消</el-button>
      </el-dialog>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                name:'',
                status:'',
                svipId:'0',
                caseStatusArr:{
                  1:"未开始",
                  2:"进行中",
                  3:"已结束",
                },
                PresentVoList:[],
                svipList:[],
                addDialogVisible:false,//新增的模态框
                addForm:{},//新增的对象
                addFormRules:{},//新增表单规则
                value1: [],//时间插件
                addDialogVisible1:false,//新增商品的模态框
                addList:[],//新增商品
                commodityList:[],//所有商品列表
                iurl: this.$MyUrl.imgUrl+'commodity/',//图片地址
                commodityname:'',//查询用户的用户名
                readyList:[],//查询用户模态框中 选中的用户
                pageNum1: 1,
                pageSize1: 10,
                total1: 0,//查询用户分页相关
                svipIds:[],//新增--选中的付费会员id
                addSvipList:[],


              /*修改相关*/
                changeForm:{},//修改对象
                changeDialogVisible:false,//修改的模态框
                changeDialogVisible1:false,
                changeFormRules:{},
                changeSvipIds:[],
                changeSvipList:[],
                value2:[],
                changeList:[],

            };
        },
        methods: {
            doChange(){
              this.changeForm.startTime = this.value2[0];
              this.changeForm.endTime = this.value2[1];
              this.changeSvipList = [];
              this.changeSvipIds.forEach(((value, index) => {
                this.changeSvipList.push(
                    {
                      id:value
                    }
                );
              }))
              this.changeForm.list = this.changeSvipList;
              this.changeForm.list1 = this.changeList;
              let url = "present/update";
              this.$axios.put(url,this.changeForm).then(res=>{
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.reloadData();
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })

            },
            cancelChange(){
              this.changeDialogVisible = false;
              this.reloadData();
            },
            doChange0(){
                this.changeList = this.readyList;
                this.changeDialogVisible1 = false;
            },
            doAdd0(){
              this.addList = this.readyList;
              this.addDialogVisible1 = false;
            },
            // 分页相关 商品查询
            handleSizeChange1(newSize) {
              this.pageSize1 = newSize;
              this.reloadData();
            },
            handleCurrentChange1(newPage) {
              this.pageNum1 = newPage;
              this.reloadData();
            },

            idChance(selection){
              this.readyList =[];
              for(let o of selection){
                this.readyList.push(o);
              }
            },
            searchCommodity(){
              this.pageNum1 = 1;
              this.getCommodityList();
            },

            getCommodityList() {
              let url = "commodity/clist";
              this.$axios.get(url, {
                params: {
                  name: this.commodityname,
                  now: this.pageNum,
                  size: this.pageSize
                }
              }).then(res => {
                if (res.data.code == 200) {
                  this.commodityList = res.data.data.list;

                  this.pageNum1 = res.data.data.pageNum;
                  this.pageSize1 = res.data.data.pageSize;
                  this.total1 = res.data.data.total;
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  })
                }
              });
            },

            showCommodity1(){
              this.addDialogVisible1 = true;
              this.$nextTick(() => {
                for (let com of this.addList) {
                  this.commodityList.forEach((item, index) => {
                    if (com.id === item.id) {
                      this.$refs.multipleTable.toggleRowSelection(this.commodityList[index], true)
                    }
                  })
                }
              })
            },

            showCommodity2(){
              this.changeDialogVisible1 = true;
              this.$nextTick(() => {


                this.commodityList.forEach((item, index) => {
                  this.$refs.multipleTable1.toggleRowSelection(this.commodityList[index], false)
                })

                for (let com of this.changeList) {
                  this.commodityList.forEach((item, index) => {
                    if (com.id === item.id) {
                      this.$refs.multipleTable1.toggleRowSelection(this.commodityList[index], true)
                    }
                  })
                }
              })
            },
            doAdd(){
              this.addForm.startTime = this.value1[0];
              this.addForm.endTime = this.value1[1];
              this.svipIds.forEach(((value, index) => {
                this.addSvipList.push(
                    {
                      id:value
                    }
                );
              }))
              this.addForm.list = this.addSvipList;
              this.addForm.list1 = this.addList;
              let url = "present/add";
              this.$axios.post(url,this.addForm).then(res=>{
                if (res.data.code == 200) {

                  this.addForm = {};
                  this.value1 = [];
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.reloadData();
                  this.addSvipList = [];
                  this.addForm = {};
                  this.addList = [];
                  this.svipIds = [];
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })

            },
            cancelAdd(){
              this.addDialogVisible = false;
              this.addForm = {};
            },
            showAdd(){
              this.addDialogVisible = true;
            },
            doSearch(id){
              this.svipId = id;
            },
            resetBox(){
              this.name='';
              this.status='';
              this.svipId='';
              this.search();
            },
            search(){
              this.pageNum = 1;
              this.getPresent();
            },
            handleSizeChange(newSize) {
              this.pageSize = newSize;
              this.reloadData();
            },
            handleCurrentChange(newPage) {
              this.pageNum = newPage;
              this.reloadData();
            },
            startIt(id){
              let url = "present/start";
              this.$axios.delete(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  setTimeout(this.getPresent,500);
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            stopIt(id){
              let url = "present/stop";
              this.$axios.delete(url,{
                params:{
                  id:id,
                }
              }).then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  setTimeout(this.getPresent,500);
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            showData(){

            },
            showChange(obj){
              this.changeDialogVisible = true;
              this.changeForm = obj;
              this.value2[0] = this.changeForm.startTime;
              this.value2[1] = this.changeForm.startTime;
              this.changeSvipIds = [];
              this.changeForm.list.forEach(value => {
                this.changeSvipIds.push(value.id);
              })
              this.changeList = this.changeForm.list1;



            },

            getPresent(){
              let url = "present/showPresent";
              this.$axios.get(url, {
                params:{
                  now:this.pageNum,
                  size:this.pageSize,
                  name:this.name,
                  status:this.status,
                  svipId:this.svipId
                }
              }).then(res=>{
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.PresentVoList = res.data.data.list;


                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },

            getSvipList(){
              let url = "present/showSvipList";
              this.$axios.get(url).then(res=>{
                if (res.data.code == 200) {
                  this.svipList = res.data.data;
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            reloadData() {
              this.getPresent();
              this.getSvipList();
            }
        },
        created() {
            this.reloadData();
            this.getCommodityList();
        }
    };
</script>
<style lang="less" scoped>
</style>